<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi learn 1</title>
  <style>
    body {
      margin: 0;
    }
    canvas {
      display: block;
      background: blue;
    }
  </style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="../lib/pixi.js"></script>
<script type="text/javascript">
  const canvas = document.getElementById('mycanvas')
  const app = new PIXI.Application({
    view: canvas,
    width: window.innerWidth,
    height: window.innerHeight
  })

  let graphic = new PIXI.Graphics()
  graphic.x = app.renderer.width / 2
  graphic.y = app.renderer.height / 2
  app.stage.addChild(graphic)

  //
  graphic.lineStyle(5, 0x00ff00)
  graphic.beginFill(0xff0000)
  // graphic.drawCircle(0, 0, 100)
  // graphic.drawRect(0, 0, 100, 200)
  // graphic.drawStar(0, 0, 5, 100, 40)
  // graphic.drawShape(new PIXI.Circle(0,0,140))
  // graphic.drawPolygon(new PIXI.Point(100, 100), new PIXI.Point(100,200),
  // new PIXI.Point(200, 100))

  graphic.moveTo(0, 0)
  graphic.lineTo(100, 100)
  graphic.lineTo(100, 200)
  graphic.lineTo(0, 200)
  graphic.bezierCurveTo(-200, 200, -200, 100, -100, 0)
  graphic.quadraticCurveTo(-200, -100, 0, -200)
  graphic.arc(0, 0, 50, 0, 0.5)

  graphic.closePath()
  graphic.endFill()

  app.ticker.add(animate)

  function animate() {
  }

</script>
</body>
</html>
